<template>
  <div class="article-detail">
    <!-- 左侧文章内容 (3:1比例) -->
    <el-card class="article-card">
      <h1 class="title">{{ article.title }}</h1>
      <div class="meta">
        <span class="date">{{ article.authorName }}</span>
        <el-divider direction="vertical" />
        <span class="category">{{ article.createdAt }}</span>
      </div>
      <div class="content" v-html="article.content"></div>
    </el-card>
    <!-- 评论区域 -->
    <!-- <commentSelection :articleId="route.params.articleId" /> -->
    <Comment :articleId="route.params.articleId" />
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, provide, inject, watch } from "vue";
import { useRoute } from "vue-router";
import request from "@/components/utiles/request.js";
import Comment from "@/components/comment/Comment.vue";
const route = useRoute();
const article = reactive({
  // 文章数据
  title: "",
  content: "",
  authorName: "",
  createdAt: "",
});

const content = inject("content");

// 根据路由参数获取文章数据
onMounted(async () => {
  const articleId = route.params.articleId;
  const contentData = await request.get(`/article/selectContent/${articleId}`);
  if (contentData.data.code === 200) {
    article.title = contentData.data.data.title;
    article.content = contentData.data.data.content;
    article.authorName = contentData.data.data.authorName;
    article.createdAt = contentData.data.data.createdAt;
  } else {
    console.error("获取文章数据失败:", contentData.message);
  }
});
watch(
  () => article.content,
  (newValue) => {
    content.value = newValue;
  }
);

</script>

<style scoped>
.article-detail {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.article-card {
  margin-bottom: 20px;
  .title {
    font-size: 24px;
    margin-bottom: 12px;
  }
  .meta {
    color: #666;
    margin-bottom: 20px;
  }
  .content {
    line-height: 1.8;
    :deep(img) {
      /* 处理内容中的图片 */
      max-width: 100%;
      margin: 10px 0;
    }
  }
}

@media (max-width: 768px) {
  .article-card {
    .title {
      font-size: 20px;
    }
  }
}
</style>
